@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
    
}
.menu{
    position: fixed;
    bottom: p(67);
    z-index: 1;
    width: 100%;
    padding: 0;
    li{
        width: p(171);
        height: p(70);
        margin: 0 auto;
        list-style: none;
        img{
            width: 100%;
        }
    }
}
.indexMobile{
    .section1{
        background: url(../img/bg-img.png)no-repeat;
        background-size: cover;
        overflow: hidden;
    //logo
    .logo{
        width: p(103);
        height: p(38);
//      overflow: hidden;
        margin-top: p(44);
        margin-left: p(45);
        img{
            width: 100%;
        }
    }
    //文字
    .title{
            margin-top: p(79);
            display: flex;
            flex-direction: column;
            align-items: center;
            img:nth-child(1){
                width: p(381);
                position: relative;
                z-index: 1;
            }
            img:nth-child(2){
                width: p(576);
                position: relative;
                top: p(-16);
            }
            img:nth-child(3){
                width: p(352);
                position: relative;
                top: p(-20);
            }
            img:nth-child(4){
                width: p(341);
                position: relative;
                top: p(-10);
            }
        }
    //云朵
    .cloud{
        width: p(77);
        height: p(56);
        overflow: hidden;
        position: relative;
        top: p(-88);
        left: p(41);
        animation-name: cloudmove;
        animation-duration: 40s;
        animation-iteration-count: infinite;
        img{
            width: 100%;
        }
    }
    .yun2{
        display: flex;
        justify-content: center;
        .cloud2{
            width: p(58);
            height: p(43);
            overflow: hidden;
            position: relative;
            top: p(-108);
            left: p(250);
            animation-name: cloud2move;
            animation-duration: 40s;
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        @keyframes cloud2move{
        0%{
            left: 30%;
             opacity: 1;
        }
        90%{
            left: 100%;
            opacity: 0.6;
        }
        100%{
            left: 0%;
            opacity: 0;
        }
    }
    }
    
    .cloud3{
        width: p(43);
        height: p(35);
        overflow: hidden;
        position: relative;
        top: p(-51);
        left: p(440);
        animation-name: cloud3move;
        animation-duration: 40s;
        animation-iteration-count: infinite;
        img{
            width: 100%;
        }
    }
    
    .cloud4{
        width: p(59);
        height: p(44);
        overflow: hidden;
        position: relative;
        top: p(-28);
        left: p(534);
        animation-name: cloud4move;
        animation-duration: 40s;
        animation-iteration-count: infinite;
        img{
            width: 100%;
        }
    }
    
    .cloud5{
        width: p(34);
        height: p(34);
        overflow: hidden;
        position: relative;
        top: p(-25);
        left: p(436);
        animation-name: cloud5move;
        animation-duration: 40s;
        animation-iteration-count: infinite;
        img{
            width: 100%;
        }
    }
    @keyframes cloudmove{
        0%{
            right: 0%;
             opacity: 1;
        }
        90%{
            right: 100%;
            opacity: 0;
        }
        100%{
            right: 0%;
            opacity: 0;
        }
    }
    
    @keyframes cloud3move{
        0%{
             left: -10%;
             opacity: 1;
        }
        90%{
            left: 100%;
            opacity: 0;
        }
        100%{
            left: -10%;
            opacity: 0;
        }
    }
    @keyframes cloud4move{
        0%{
            left: -30%;
             opacity: 1;
        }
        90%{
            left: 100%;
            opacity: 0;
        }
        100%{
            left: -30%;
            opacity: 0;
        }
    }
    @keyframes cloud5move{
        0%{
            left: -30%;
             opacity: 1;
        }
        90%{
            left: 100%;
            opacity: 0;
        }
        100%{
            left: -30%;
            opacity: 0;
        }
    }
    //人物
    .people{
        display: flex;
        justify-content: center;
        position: relative;
        .character{
            width: p(332);
            height: p(421);
            display: flex;
            align-items: center;
            overflow: hidden;
            position: absolute;
//          top: p(-120);
            top: p(-1500);
            animation-name: chara;
            animation-duration: 3s;
            animation-timing-function: cubic-bezier(.72,.64,.41,1.31);
            animation-iteration-count: initial;
            animation-fill-mode: forwards;
            img{
                width: 100%;
            }
        }
    }
     @keyframes chara{
        0%{
            top: p(-1500);
             opacity: 0;
        }
        25%{
            top: p(-100);
             opacity: 1;
        }
        50%{
            top: p(-125);
             opacity: 1;
        }
        75%{
            top: p(-110);
             opacity: 1;
        }
        100%{
            top: p(-120);
            opacity: 1;
        }
    }
    //月亮
    .yueliang{
        display: flex;
        justify-content: center;
        position: relative;
        .moon{
            width: p(65);
            height: p(65);
            overflow: hidden;
            position: absolute;
            top: p(-150);
            right: p(106);
            img{
                width: 100%;
                border-radius: 50%;
            }
        }
        .moon-light{
            width: p(182);
            height: p(182);
            overflow: hidden;
            position: absolute;
            top: p(-204);
            right: p(50);
            animation-name: light;
            animation-duration: 1s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-play-state: running;
            img{
                width: 100%;
                border-radius: 50%;
            }
        }
        @keyframes light{
            0%{
                transform: scale(1);
            }
            100%{
                transform: scale(0.9);
            }
        }
    }
    //对话
    .tall{
        display: flex;
        justify-content: center;
        position: relative;
    .miyue{
        width: p(94);
        height: p(69);
        overflow: hidden;
        position: absolute;
        animation-name: tall1;
        animation-delay: 0.5s;
        animation-duration: 2s;
        animation-iteration-count: initial;
        top: p(-54);
        left: p(63);
        img{
            width: 100%;
        }
    }
    @keyframes tall1{
        0%{
            transform: scale(1);
        }
        25%{
            transform: scale(2);
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(2);
        }
        100%{
            transform: scale(1);
        }
    }
    .what{
        width: p(148);
        height: p(82);
        overflow: hidden;
        position: absolute;
        top: p(-50);
        right: p(55);
        animation-name: tall2;
        animation-delay: 1s;
        animation-duration: 2s;
        animation-iteration-count: initial;
        img{
            width: 100%;
        }
    }
    @keyframes tall2{
        0%{
            transform: scale(1);
        }
        25%{
            transform: scale(2);
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(2);
        }
        100%{
            transform: scale(1);
        }
    }
    
    .look{
        width: p(127);
        height: p(78);
        overflow: hidden;
        position: absolute;
        animation-name: tall3;
        animation-delay: 1.5s;
        animation-duration: 2s;
        animation-iteration-count: initial;
        top: p(200);
        left: p(50);
        img{
            width: 100%;
        }
    }
    @keyframes tall3{
        0%{
            transform: scale(1);
        }
        25%{
            transform: scale(2);
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(2);
        }
        100%{
            transform: scale(1);
        }
    }
    .taizi{
        width: p(94);
        height: p(57);
        overflow: hidden;
        position: absolute;
        animation-name: tall4;
        animation-delay: 2s;
        animation-duration: 2s;
        animation-iteration-count: initial;
        top: p(200);
        right: p(50);
        img{
            width: 100%;
        }
    }
    @keyframes tall4{
        0%{
            transform: scale(1);
        }
        25%{
            transform: scale(2);
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(2);
        }
        100%{
            transform: scale(1);
        }
    }
    }
    .btn{
        width: p(171);
//      height: p(70);
        overflow: hidden;
        position: relative;
        bottom: p(62);
        left: p(235);
        img{
            width: 100%;
        }
    }
}
//问题页面
 .question{
     background: url(../img/bg-img-2.png);
     background-size: cover;
     .slide{
         width: 100%;
         position: relative;
         overflow: hidden;
         h1{
             font-size: p(34);
             line-height: p(34);
             padding: 0 p(38);
             color: #fff;
             display: flex;
             justify-content: center;
             margin-top: p(104);
         }
         .q1-pic{
             width: p(250);
             height: p(350);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(42);
             img{
                 width: 100%;
             }
         }
         .q2-pic{
             width: p(212);
             height: p(234);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(77);
             img{
                 width: 100%;
             }
         }
         .q3-pic{
             width: p(333);
             height: p(255);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(77);
             img{
                 width: 100%;
             }
         }
         .q4-pic{
             width: p(173);
             height: p(121);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(200);
             img{
                 width: 100%;
             }
         }
         .q5-pic{
             width: p(300);
             height: p(200);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             img{
                 width: 100%;
             }
         }
         .q6-pic{
             width: p(345);
             height: p(193);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             img{
                 width: 100%;
             }
         }
         .q7-pic{
             width: p(359);
             height: p(247);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             img{
                 width: 100%;
             }
         }
         .q12-pic{
             width: p(322);
             height: p(247);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             margin-bottom: p(80);
             img{
                 width: 100%;
             }
         }
         .q15-pic{
             width: p(291);
             height: p(291);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             margin-bottom: p(60);
             img{
                 width: 100%;
                 border-radius: 50%;
             }
         }
         .q16-pic{
             width: p(345);
             height: p(325);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             img{
                 width: 100%;
             }
         }
         .q17-pic{
             width: p(350);
             height: p(250);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             margin-bottom: p(50);
             img{
                 width: 100%;
             }
         }
         .q18-pic{
             width: p(250);
             height: p(350);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             img{
                 width: 100%;
             }
         }
         .q19-pic{
             width: p(233);
             height: p(282);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             margin-bottom: p(100);
             img{
                 width: 100%;
             }
         }
         .q21-pic{
             width: p(288);
             height: p(367);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(80);
             img{
                 width: 100%;
             }
         }
         .q22-pic{
             width: p(376);
             height: p(314);
             overflow: auto;
             margin: 0 auto;
             margin-top: p(100);
             img{
                 width: 100%;
             }
         }
         .q1cloud{
             position: relative;
             display: flex;
             .qc1{
                 width: p(112);
                 height: p(83);
                 overflow: auto;
                 position: absolute;
                 top: p(-49);
                 left: p(32);
                 img{
                     width: 100%;
                 }
             }
             .qc2{
                 width: p(64);
                 height: p(47);
                 overflow: auto;
                 position: absolute;
                 top: p(-43);
                 right: p(134);
                 img{
                     width: 100%;
                 }
             }
             .qc3{
                 width: p(111);
                 height: p(82);
                 overflow: auto;
                 position: absolute;
                 top: p(-97);
                 right: p(-30);
                 img{
                     width: 100%;
                 }
             }
         }
         //选项
         .option{
             margin-top: p(100);
             display: flex;
             align-items: center;
             flex-direction: column;
             .op1{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 position: relative;
                 .op1-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op1-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                     
                 }
             }
             .op1:hover{
                 .op1-pic1{
                     display: none;
                 }
                 .op1-pic2{
                     display: block;
                 }
             }
             //----------------------
             .op2{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 margin-top: p(30);
                 position: relative;
                 .op2-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op2-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                     
                 }
             }
             .op2:hover{
                 .op2-pic1{
                     display: none;
                 }
                 .op2-pic2{
                     display: block;
                 }
             }
               //----------------------
              .op3{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 margin-top: p(30);
                 position: relative;
                 .op3-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op3-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                     
                 }
             }
             .op3:hover{
                 .op3-pic1{
                     display: none;
                 }
                 .op3-pic2{
                     display: block;
                 }
             }
             //----------------------
             .op4{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 margin-top: p(30);
                 position: relative;
                 .op4-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op4-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                     
                 }
             }
             .op4:hover{
                 .op4-pic1{
                     display: none;
                 }
                 .op4-pic2{
                     display: block;
                 }
             }
         }
         //选项
         .option22{
             margin-top: p(100);
             display: flex;
             align-items: center;
             flex-direction: column;
             .op1{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 position: relative;
                 .op1-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op1-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 >p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     margin-left: 40%;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                 }
             }
             .op1:hover{
                 .op1-pic1{
                     display: none;
                 }
                 .op1-pic2{
                     display: block;
                 }
             }
             //----------------------
             .op2{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 margin-top: p(30);
                 position: relative;
                 .op2-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op2-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     margin-left: 40%;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                     
                 }
             }
             .op2:hover{
                 .op2-pic1{
                     display: none;
                 }
                 .op2-pic2{
                     display: block;
                 }
             }
               //----------------------
              .op3{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 margin-top: p(30);
                 position: relative;
                 .op3-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op3-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     margin-left: 40%;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                     
                 }
             }
             .op3:hover{
                 .op3-pic1{
                     display: none;
                 }
                 .op3-pic2{
                     display: block;
                 }
             }
             //----------------------
             .op4{
                 width: p(368);
                 height: p(64);
                 margin-left: p(-180);
                 margin-top: p(30);
                 position: relative;
                 .op4-pic1{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 .op4-pic2{
                     width: p(368);
                     height: p(64);
                     overflow: hidden;
                     display: none;
                     img{
                         width: 100%;
                     }
                 }
                 p{
                     font-size: p(22);
                     color: #000;
                     line-height: p(22);
                     font-weight: bold;
                     margin-left: 40%;
                     position: absolute;
                     top: p(12);
                     left: p(20);
                     
                 }
             }
             .op4:hover{
                 .op4-pic1{
                     display: none;
                 }
                 .op4-pic2{
                     display: block;
                 }
             }
         }
         //音乐盒
         .musicbox{
             position: absolute;
             right: p(45);
             bottom: p(60);
             display: flex;
             flex-direction: column-reverse;
             .dog{
                 width: p(83);
                 height: p(92);
                 overflow: hidden;
             z-index: 1;
                 img{
                     width: 100%;
                 }
             }
             .mus1{
                 width: p(51);
                 height: p(54);
                 position: absolute;
                 top: p(20);
                 overflow: hidden;
                 animation-name: music;
                 animation-duration: 9s;
                 animation-delay: 10s;
                 animation-iteration-count: infinite;
                 img{
                     width: 100%;
                 }
             }
             @keyframes music{
                    0%{
                        top: p(20);
                         opacity: 1;
                    }
                    100%{
                        top: p(-250);
                        opacity: 0;
                    }
                }
             .mus2{
                 width: p(56);
                 height: p(47);
                 overflow: hidden;
                 position: absolute;
                 top: p(20);
                 animation-name: music2;
                 animation-duration: 9s;
                 animation-delay: 8s;
                 animation-iteration-count: infinite;
                 img{
                     width: 100%;
                 }
             }
             @keyframes music2{
                    0%{
                        top: p(-10);
                         opacity: 1;
                    }
                    100%{
                        top: p(-250);
                        opacity: 0;
                    }
                }
             .mus3{
                 width: p(56);
                 height: p(50);
                 overflow: hidden;
                 position: absolute;
                 top: p(20);
                 animation-name: music3;
                 animation-duration: 9s;
                 animation-delay: 6s;
                 animation-iteration-count: infinite;
                 img{
                     width: 100%;
                 }
             }
              @keyframes music3{
                    0%{
                        top: p(-10);
                         opacity: 1;
                    }
                    100%{
                        top: p(-250);
                        opacity: 0;
                    }
                }
             .mus4{
                 width: p(59);
                 height: p(58);
                 overflow: hidden;
                 position: absolute;
                 top: p(20);
                 animation-name: music4;
                 animation-duration: 9s;
                 animation-delay: 4s;
                 animation-iteration-count: infinite;
                 img{
                     width: 100%;
                 }
             }
             @keyframes music4{
                    0%{
                        top: p(-10);
                         opacity: 1;
                    }
                    100%{
                        top: p(-250);
                        opacity: 0;
                    }
                }
             .mus5{
                 width: p(90);
                 height: p(100);
                 overflow: hidden;
                 position: absolute;
                 top: p(-10);
                 animation-name: music3;
                 animation-duration: 9s;
                 animation-delay: 2s;
                 animation-iteration-count: infinite;
                 img{
                     width: 100%;
                 }
             }
             @keyframes music5{
                    0%{
                        top: p(-30);
                         opacity: 1;
                    }
                    100%{
                        top: p(-250);
                        opacity: 0;
                    }
                }
         }
         //测试页面
         .q2cloud{
             position: relative;
             display: flex;
             .qc1{
                 width: p(112);
                 height: p(83);
                 overflow: auto;
                 position: absolute;
                 top: p(360);
                 left: p(8);
                 img{
                     width: 100%;
                 }
             }
             .qc2{
                 width: p(64);
                 height: p(47);
                 overflow: auto;
                 position: absolute;
                 top: p(180);
                 right: p(134);
                 img{
                     width: 100%;
                 }
             }
             .qc3{
                 width: p(111);
                 height: p(82);
                 overflow: auto;
                 position: absolute;
                 top: p(180);
                 right: p(-30);
                 img{
                     width: 100%;
                 }
             }
         }
         //logo
            .logo{
                width: p(103);
                height: p(38);
                margin-top: p(44);
                margin-left: p(45);
                img{
                    width: 100%;
                }
            }
             .test{
                 padding-top: p(68);
                 position: relative;
                 width: p(534);
                 margin: 0 auto;
                 .test-pic{
                     width: p(534);
                     height: p(846);
                     margin: 0 auto;
                     overflow: hidden;
                     img{
                         width: 100%;
                     }
                 }
                 >.test-h1{
                     font-size: p(52);
                     line-height: p(52);
                     color: #f6ff00;
                     position: absolute;
                     top: p(50);
                     left: 20%;
                 }
                 >p:nth-child(3){
                     font-size: p(38);
                     line-height: p(38);
                     color: #fff;
                     position: absolute;
                     top: p(250);
                     left: 15%;
                 }
                 >p:nth-child(4){
                     font-size: p(38);
                     line-height: p(38);
                     color: #fff;
                     position: absolute;
                     top: p(310);
                     left: 25%;
                 }
                 >p:nth-child(5){
                     font-size: p(38);
                     line-height: p(38);
                     color: #fff;
                     position: absolute;
                     top: p(370);
                     left: 18%;
                     span{
                         color: #36ff00;
                     }
                 }
                 >p:nth-child(6){
                     font-size: p(38);
                     line-height: p(38);
                     color: #fff;
                     position: absolute;
                     top: p(430);
                     left: 34%;
                 }
                 //按钮
                 .test-btn{
                     width: p(200);
                     height: p(71);
                     overflow: hidden;
                     position: absolute;
                     bottom: p(80);
                     right: p(60);
                     img{
                         width: 100%;
                     }
                 }
                 //人物
                 .test-chara{
                     width: p(253);
                     height: p(333);
                     overflow: hidden;
                     position: absolute;
                     bottom: p(-74);
                     left: p(20);
                     img{
                         width: 100%;
                     }
                 }
             }

//               .logo{
//                      width: p(103);
//                      height: p(38);
//                      margin-top: p(44);
//                      margin-left: p(45);
//                      img{
//                          width: 100%;
//                      }
//                  }
                 .eva{
                     width: p(173);
                     height: p(173);
                     overflow: hidden;
                     margin: 0 auto;
                     margin-top: p(35);
                     img{
                         width: 100%;
                         border-radius: 50%;
                     }
                 } 
                 >p:nth-child(3){
                     font-size: p(33);
                     line-height: p(33);
                     color: #fff;
                     width: p(335);
                     margin: 0 auto;
                     margin-top: p(12);
                     span{
                         color: #fff000;
                     }
                 }  
                 >p:nth-child(4){
                     font-size: p(33);
                     line-height: p(33);
                     color: #fff;
                     width: p(462);
                     margin: 0 auto;
                     margin-top: p(28);
                 }
                 >p:nth-child(5){
                     font-size: p(25);
                     line-height: p(35);
                     color: #fff;
                     width: p(348);
                     margin-top: p(86);
                     margin-left: p(37);
                 }
                 .tit-year1{
                     position: absolute;
                     top: p(605);
                     left: p(78);
                     .year1{
                         width: p(132);
                         height: p(53);
                         img{
                             border-radius: p(26);
                             width: 100%;
                         }
                     }
                     p{
                         font-size: p(25);
                         line-height: p(25);
                         position: absolute;
                         top: p(13);
                         left: p(9);
                         color: #2f3400;
                     }
                 }
                  .tit-year2{
                     position: absolute;
                     top: p(633);
                     left: p(222);
                     .year2{
                         width: p(178);
                         height: p(56);
                         img{
                             border-radius: p(27);
                             width: 100%;
                         }
                     }
                     p{
                         font-size: p(25);
                         line-height: p(25);
                         position: absolute;
                         top: p(15);
                         left: p(13);
                         color: #2f3400;
                     }
                 }
                 .tit-year3{
                     position: absolute;
                     top: p(678);
                     right: p(61);
                     .year3{
                         width: p(190);
                         height: p(56);
                         img{
                             border-radius: p(27);
                             width: 100%;
                         }
                     }
                     p{
                         font-size: p(25);
                         line-height: p(25);
                         position: absolute;
                         top: p(15);
                         left: p(12);
                         color: #2f3400;
                     }
                 }
                 .tit-year4{
                     position: absolute;
                     top: p(537);
                     right: p(84);
                     .year4{
                         width: p(167);
                         height: p(56);
                         img{
                             border-radius: p(27);
                             width: 100%;
                         }
                     }
                     p{
                         font-size: p(25);
                         line-height: p(25);
                         position: absolute;
                         top: p(15);
                         left: p(12);
                         color: #2f3400;
                     }
                 }
                 h3{
                     font-size: p(25);
                     line-height: p(25);
                     color: #d5d5d5;
                     width: p(484);
                     margin: 0 auto;
                     margin-top: p(266);
                 }
                 textarea{
                     width: p(499);
                     height: p(75);
                     border: p(2) solid #fff;
                     display: block;
                     margin: 0 auto;
                     background: transparent;
                     margin-top: p(18);
                     padding-top: p(6);
                     padding-left: p(6);
                     color: #fff;
                     resize: none;
                 }
                 //按钮
                 .tp-btn{
                     position: relative;
                 .tijiao{
                     position: absolute;
                     top: p(17);
                     left: p(151);
                     .t1{
                         width: p(142);
                         height: p(51);
                         img{
                             width: 100%;
                         }
                     }
                     .t2{
                         width: p(142);
                         height: p(51);
                         display: none;
                         img{
                             width: 100%;
                         }
                     }
                 }
                 .tijiao:hover{
                     .t1{
                         display: none;
                     }
                     .t2{
                         display: block;
                     }
                 }
                 .play{
                     position: absolute;
                     top: p(18);
                     right: p(156);
                     width: p(141);
                     height: p(50);
                     img{
                         width: 100%;
                     }
                 }
                 }
            
     }
 }
}
//取消默认样式的左右跳转箭头
.fp-controlArrow{
                display: none !important;
            }